<template>
  <div>
    <el-dialog :title="dialogTitle"
               :visible.sync="showDiaLog"
               :width="dialogWidth"
               :height="dialogHeight"
               @close="closeDialog"
               append-to-body
			   v-if="showDiaLog"
    >
      <el-container>
        <el-aside class="el-aside-tree-container"
                  width="200px">
          <albumTree :albumCode="albumCode"
                     v-if="showDiaLog"
                     :resType="resType"
                     @click="loadRightData"
                     edit=true>
          </albumTree>
        </el-aside>
        <el-main class="rightMainBox">
          <accessoryList ref="rightList"
                         v-if="showDiaLog"
                         @callback="selFileCallBack"
                         :imgNum="imgNum"
                         :selectType="selectType"
                         :selMaxWidth="selMaxWidth"
                         :selMaxHeight="selMaxHeight"
                         :resType="resType"
          >
          </accessoryList>
        </el-main>
      </el-container>
      <span slot="footer"
            class="dialog-footer">
        <el-button type="primary"
                   @click="ok">确 定</el-button>
        <el-button @click="showDiaLog = false">取 消</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import albumTree from './lib/albumTree'
import accessoryList from './lib/accessoryList'
import constants from "@/const/constants";

export default {
  props: {
    albumCode: {
      type: String,
      default: "store"
    },
    resType: {
      type: String,
      default: constants.FILE_TYPE_PIC
    },
    dialogTitle: {
      type: String,
      default: "选择图片"
    },
    dialogWidth: {
      type: String,
      default: "80%"
    },
    dialogHeight: {
      type: String,
      default: "100%"
    },
    selMaxWidth: {
      type: String,
      default: "0"
    },
    selMaxHeight: {
      type: String,
      default: "0"
    },
    selectType: {//文件选择方式：radio,checkbox 单选或多选
      type: String,
      default: "radio"
    },
    whereUpload: {//在哪里点击的文件选择，后天上传设置，点击提交的时候，只能选择一张图片，其他地方点击图片上传不做此要求例如:商品发布页面
      default: ""
    },
    imgNum:{
      type:String,
      default:'5'
    },

  },
  data () {
    return {
      Event,
      showDiaLog: false,
      selUrls: []
    }
  },
  components: {
    albumTree,
    accessoryList
  },
  methods: {
    open () {
      this.showDiaLog = true;
    },
    closeDialog () {
      //关闭弹窗回调
    },
    ok () {
      console.log(this.selUrls);
      //在哪里点击的文件选择，后天上传设置，点击提交的时候，只能选择一张图片，其他地方点击图片上传不做此要求例如:商品发布页面
      if(this.whereUpload){
        if(this.whereUpload == "upLoadSet"){
          if(this.selUrls.length>1){
            this.$message.error('最多选择1张图片');
            return;
          }
          else {
            //关闭弹窗回调
            this.$emit('callback', this.selUrls);
            this.showDiaLog = false;
          }
        }
      }
      else {
        //关闭弹窗回调
        this.$emit('callback', this.selUrls);
        this.showDiaLog = false;
      }
    },
    loadRightData (albumId) {
      this.$refs.rightList.reLoadData(albumId.toString());
    },
    selFileCallBack (urls) {
      this.selUrls = urls;
    }
  }
}
</script>

